<template>
<d2-container>
 <el-card class="classify" shadow="never">
    <el-form :inline="true" :model="queryData" class="demo-form-inline">
      <el-form-item label="活动状态">
        <el-select v-model="queryData.status" filterable>
          <el-option label="全部" value="" />
          <el-option label="未开始" value="1" />
          <el-option label="进行中" value="2" />
          <el-option label="已结束" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="展示状态">
        <el-select v-model="queryData.state">
          <el-option label="全部" value="" />
          <el-option label="展示中" value="0" />
          <el-option label="禁止展示" value="1" />
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="queryData.name" placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="tableLoading" @click="queryHandler">查询</el-button>
        <el-button type="primary" @click="addHandler">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="tableLoading" :data="tableData" stripe>
      <el-table-column type="index" label="编号" width="50" />
      <el-table-column prop="title" label="活动标题" />
      <el-table-column prop="top_pic" label="顶部图片" width="90">
        <template slot-scope="{ row }">
          <el-image
            v-if="row.top_pic"
            style="width: 50px; height: 50px"
            :src="row.top_pic"
            :preview-src-list="[row.top_pic]"
          />
          <span v-else>暂无图片</span>
        </template>
      </el-table-column>
      <el-table-column prop="url" label="访问链接" />
      <el-table-column prop="is_mode" label="兑奖模式">
        <template slot-scope="scope">
          <div v-if="scope.row.is_mode === 0">随机抽奖</div>
          <div v-else>自由兑换</div>
        </template>
      </el-table-column>
      <el-table-column prop="join_num" label="参与人数" />
      <!-- <el-table-column prop="share_code" label="口令" /> -->
      <el-table-column label="独立访问量">
        <template slot-scope="scope">
          <el-popover placement="bottom" :ref="`popover-${scope.$index}`" title="独立访问量"  width="200" trigger="click">
            <div>{{uv}}</div>
            <div style="text-align: right; margin-top: 10px">
                <el-button size="mini"  @click="scope._self.$refs[`popover-${scope.$index}`].doClose()">取消</el-button>
            </div>
            <el-button slot="reference"  @click="lookpv(scope.row)">点击查看</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="展示状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.state === 0">展示中</el-tag>
          <el-tag v-else type="warning">禁止展示</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="活动状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1">未开始</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success">进行中</el-tag>
          <el-tag v-else type="warning">已结束</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dateline" label="添加日期" />
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <div>
            <el-button type="text" size="small" @click="editHandler(scope.row)">活动详情</el-button>
            <el-button type="text" size="small" @click="lookyw(scope.row)">编辑奖品</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :total="pagination.total" :page-size="pagination.pageSize" @current-change="changeHandler" />
    <!-- 编辑 -->
    <el-dialog :title="dialogFormTitle" :close-on-click-modal="false" :visible.sync="dialogFormVisible">
      <!--    -->
      <el-form ref="form"  :model="formData" :rules="rules" label-width="190px" width="900px">
        <el-alert v-if="dialogFormTitle == '编辑'" style="margin-bottom:20px" title="如活动已开始，如需编辑请谨慎操作。如活动已结束，暂不支持编辑" center type="warning" :closable="false"></el-alert>
        <el-form-item label="活动标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入活动标题" />
        </el-form-item>
        <el-form-item label="背景颜色" prop="bg_color">
          <el-color-picker v-model="formData.bg_color"></el-color-picker>
        </el-form-item>
         <el-form-item label="顶部图片" prop="top_pic">
          <upload v-model="formData.top_pic" tips="建议上传尺寸:750*315"></upload>
        </el-form-item>
        <el-alert style="margin-bottom: 10px;font-size:12px" title="用户每次访问活动页面时的访问增加量，该次数为以下最小值和最大值之间的随机次数" type="info" :closable="false"></el-alert>
        <el-form-item label="访问量自增最小值" prop="pv_add_min">
          <div style="width:400px">
            <el-input  type="number" :min="0" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" v-model="formData.pv_add_min" placeholder="请输入访问量自增最小值" />
          </div>
        </el-form-item>
        <el-form-item label="访问量自增最大值" prop="pv_add_max">
          <div style="width:400px">
            <el-input type="number" :min="0" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" v-model="formData.pv_add_max" placeholder="请输入访问量自增最大值" />
          </div>
        </el-form-item>
        <el-form-item label="活动日期" prop="dates">
          <el-date-picker
          v-model="formData.dates"
          unlink-panels
          @change="getdate"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-alert style="margin-bottom: 10px" title="开启设备限制后一个活动一个设备只能参与一次" type="info" :closable="false"></el-alert>
      <el-form-item label="是否开启设备限制" prop="is_device">
          <el-radio-group v-model="formData.is_device">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
        <el-alert style="margin-bottom: 10px" title="兑奖模式一旦设定，编辑时不能修改" type="info" :closable="false"></el-alert>
        <el-form-item label="兑奖模式" prop="is_mode">
          <el-radio-group :disabled="dialogFormTitle == '编辑'" v-model="formData.is_mode">
          <el-radio :label="0">随机抽奖</el-radio>
          <el-radio :label="1">自由兑换</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-show="formData.is_mode === 0" label="兑奖所需积赞数量" prop="limit_num">
          <el-input-number v-model="formData.limit_num" :min="0" :precision="0" ></el-input-number>
        </el-form-item>
      <el-form-item label="可助力人数" prop="can_help">
          <el-input-number v-model="formData.can_help" :min="1" :max="50" :precision="0" ></el-input-number>
        </el-form-item>
        <el-form-item label="是否展示库存" prop="is_stock">
          <el-radio-group v-model="formData.is_stock">
          <el-radio :label="0">是</el-radio>
          <el-radio :label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
        <el-form-item label="传播模式" prop="spread_mode">
          <el-radio-group v-model="formData.spread_mode">
          <!-- <el-radio :label="0">口令</el-radio> -->
          <el-radio :label="1">海报</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.spread_mode === 1" label="海报地址" prop="poster">
        <upload v-model="formData.poster" tips="上传尺寸建议 750*1334， 大小 200KB以内"></upload>
         <div style="cursor: pointer;"><a style="color:#409eff" href="https://pic.xishuw.com/xshop%2F20210129%2F16119022118412.jpg" target="_blank">参考预览</a></div>
      </el-form-item>
      <el-form-item v-if="formData.spread_mode === 1" label="二维码起始地址" prop="location">
        <el-input v-model="formData.location" placeholder="例如： 305,1110" />
      </el-form-item>
      <el-form-item v-if="formData.spread_mode === 1" label="二维码宽高" prop="code_size">
        <el-input-number style="margin-right: 20px" v-model="formData.code_size" :min="10" :precision="0"  ></el-input-number>
        <span>宽高最小值为10，例如： 150</span>
      </el-form-item>
      <el-form-item label="活动规则" prop="rule">
        <el-input type="textarea" :rows="4" v-model="formData.rule" placeholder="请输入活动规则" />
      </el-form-item>
      <el-form-item label="活动详情" prop="detail">
        <ueditor v-model="formData.detail"></ueditor>
      </el-form-item>
      <el-form-item label="分享标题" prop="share_title">
        <el-input v-model="formData.share_title" placeholder="请输入分享标题" />
      </el-form-item>
      <el-form-item label="分享图片" prop="share_img">
        <upload v-model="formData.share_img"  tips="建议上传尺寸:200*200，建议文件大小：不超过50KB"></upload>
      </el-form-item>
      <el-form-item label="分享简介" prop="share_des">
        <el-input type="textarea" :rows="2" v-model="formData.share_des" placeholder="请输入分享简介" />
      </el-form-item>
      <!-- <el-form-item label="分享口令" prop="share_code">
        <el-input v-model="formData.share_code" placeholder="例如：积赞免费抽奖" />
      </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="_setClassifyList">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="奖品" :close-on-click-modal="false"  :fullscreen="true" :visible.sync="accessvisible" width="98%">
      <el-form ref="acclist" label-width="80px" width="100%">
        <!-- <el-alert title="ti" type="info"></el-alert> -->
      <div class="pristt" v-for="(item,index) in goods" :key="index">
          <el-form-item label="名称" label-width="60px">
             <div style="width:150px">
              <el-input :disabled="isedit != index" v-model="item.name" placeholder="请输入名称" />
            </div>
          </el-form-item>
           <el-form-item label="图片" label-width="60px">
             <div style="width:150px">
              <upload :disabled="isedit != index" v-model="item.pic"></upload>
            </div>
            </el-form-item>
            <div style="width: 68%;display: flex;flex-wrap: wrap;justify-content: flex-start; align-items: flex-start;">
              <el-form-item label="奖品类型" label-width="100px">
              <div style="width:600px;display: flex;justify-content: center;">
                <el-select v-model="item.type" :disabled="item.id || isedit != index" @change="typebtn(index)" placeholder="请选择奖品分类">
                  <el-option label="实物" :value="0" />
                  <el-option label="现金(元)" :value="1" />
                  <el-option label="金币(个)" :value="2" />
                </el-select>
                <div v-if="item.type == 1" style="display: flex;justify-content: space-between;align-items: flex-start;margin-left:10px">
                   <el-form-item label="最小值" label-width="60px">
                     <el-input-number :disabled="isedit != index" v-model="item.money_min" :min="0" :precision="2"  ></el-input-number>
                    </el-form-item>
                    <el-form-item label="最大值" label-width="60px">
                     <el-input-number :disabled="isedit != index" v-model="item.money_max" :min="0" :precision="2"  ></el-input-number>
                    </el-form-item>
                </div>
                <div v-else-if="item.type == 2" style="display: flex;justify-content: space-between;align-items: flex-start;margin-left:10px">
                  <!-- <div style="margin-left:10px">
                    <el-input type="number" :disabled="isedit != index" :min="0" v-model="item.money_min" placeholder="最小值" />
                  </div>
                  <div style="margin-left:10px">
                    <el-input type="number" :disabled="isedit != index" :min="0" v-model="item.money_max" placeholder="最大值" />
                  </div> -->
                  <el-form-item label="最小值" label-width="60px">
                     <el-input-number :disabled="isedit != index" v-model="item.money_min" :min="0" :precision="0"></el-input-number>
                  </el-form-item>
                  <el-form-item label="最大值" label-width="60px">
                    <el-input-number :disabled="isedit != index" v-model="item.money_max" :min="0" :precision="0"></el-input-number>
                  </el-form-item>
                </div>
                <el-form-item v-else label="核销截止日期" label-width="110px">
                  <el-date-picker
                    v-model="item.use_end_time"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    :disabled="isedit != index"
                    placeholder="选择日期时间">
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-form-item>
            <el-form-item v-show="item.type == 0" label="奖品价值(元)" label-width="100px">
             <div style="width:150px">
              <el-input-number :disabled="isedit != index" v-model="item.money" :min="0" :precision="0"></el-input-number>
              <!-- <el-input :disabled="isedit != index" type="number" v-model="item.money" placeholder="请输入奖品价值" /> -->
            </div>
            </el-form-item>
            <el-form-item v-show="activity.is_mode === 0" label="中奖概率(%)" label-width="120px">
              <el-input-number :disabled="isedit != index" v-model="item.ratio_num" :min="0" :precision="2" ></el-input-number>
            </el-form-item>
            <el-form-item label="库存" label-width="80px">
             <div style="width:150px">
              <el-input-number :disabled="isedit != index" v-model="item.stock"  :min="0" :precision="0"></el-input-number>
            </div>
            </el-form-item>
            <el-form-item v-show="activity.is_mode === 1" label="需赞数" label-width="90px">
             <div style="width:150px">
              <el-input-number :disabled="isedit != index" v-model="item.limit_num"  :min="0" :precision="0"></el-input-number>
            </div>
            </el-form-item>
            <el-form-item label="排序数(数字越大越靠前)" label-width="200px">
             <el-input-number :disabled="isedit != index" v-model="item.sortv" placeholder="数字越大越靠前" :min="0" :precision="0"/>
            </el-form-item>
            </div>
            <div style="display: flex;justify-content: flex-start;align-items: flex-start;">
              <el-button type="danger" @click="delbtn(item, index)" plain>删 除</el-button>
              <el-button type="primary" v-if="isedit != index" :disabled="isbianj" style="margin-left:10px" @click="prizedit(index)">编 辑</el-button>
              <el-button type="success" v-else style="margin-left:10px"  @click="addbtn(item, index)">保 存</el-button>
            </div>
         </div>
      </el-form>
      <div>
        <el-button type="primary" :disabled="isadd" @click="addpraize">新增奖品</el-button>
        <el-button @click="accessvisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-card>
</d2-container>
</template>

<script>
import { crudOptions } from './crud' // 上文的crudOptions配置
import { d2CrudPlus } from '@/components/d2-crud-plus'
import Ueditor from '@/components/Ueditor' // ES6 Module
import { GetList, infor, edit, goodsData, goodsEdit, goodsAdd, goodsUpdate, getUv } from '@/api/page' // 查询添加修改删除的http请求接口
export default {
  name: 'finace',
  components: {
    Ueditor
  },
  data () {
    return {
      queryData: {
        state: '',
        status: '',
        name: ''
      },
      isnum: false,
      num: 0,
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogFormVisible: false,
      dialogFormTitle: '',
      formData: {
        id: '',
        title: '',
        top_pic: '',
        bg_color: '',
        dates: [],
        limit_num: '',
        start_time: '',
        end_time: '',
        rule: '',
        detail: '',
        is_mode: 0,
        is_stock: 0,
        pv_add_min: '',
        pv_add_max: '',
        share_title: '',
        share_des: '',
        share_img: '',
        code_size: 150,
        // share_code: '',
        is_device: 0,
        spread_mode: 1,
        poster: '',
        location: '',
        can_help: ''
      },
      goods: [],
      czstate: '',
      tableLoading: false,
      submitLoading: false,
      accessvisible: false,
      jpdata: {},
      aid: '',
      delnum: '',
      isedit: null,
      isadd: false,
      isbianj: false,
      activity: {},
      uv: '',
      rules: {
        title: [
          { required: true, message: '请输入活动标题', trigger: 'blur' }
        ],
        bg_color: [
          { required: true, message: '请选择背景颜色', trigger: 'blur' }
        ],
        rule: [
          { required: true, message: '请输入活动规则', trigger: 'blur' }
        ],
        pv_add_min: [
          { required: true, message: '请输入访问量自增最小值', trigger: 'blur' }
        ],
        pv_add_max: [
          { required: true, message: '请输入访问量自增最大值', trigger: 'blur' }
        ],
        is_mode: [
          { required: true, message: '请输入兑奖所需积赞数量', trigger: 'blur' }
        ],
        share_title: [
          { required: true, message: '请输入分享标题', trigger: 'blur' }
        ],
        share_des: [
          { required: true, message: '请输入分享简介', trigger: 'blur' }
        ],
        share_img: [
          { required: true, message: '请上传分享图片', trigger: 'blur' }
        ],
        code_size: [
          { required: true, message: '请输入二维码宽高', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入二维码起始地址', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入奖品名称', trigger: 'blur' }
        ],
        money: [
          { required: true, message: '请输入奖品价值', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请输入库存', trigger: 'blur' }
        ],
        use_end_time: [
          { required: true, message: '请选择奖品截止使用日期', trigger: 'blur' }
        ],
        can_help: [
          { required: true, message: '请输入可助力人数', trigger: 'blur' }
        ]
      },
      acclist: {}
    }
  },
  mixins: [d2CrudPlus.crud], // 最核心部分，继承d2CrudPlus.crud
  created () {
    this.initColumns()
  },
  methods: {
    getCrudOptions () {
      return crudOptions
    },
    doRefresh () {
      this._getTableData()
    }, // 数据请求
    _getTableData () {
      const { pagination, queryData } = this
      const { name, state, status } = queryData
      this.tableLoading = true
      GetList(pagination.currentPage, name, status, state).then(res => {
        const { list = [], pagination } = res || {}
        this.tableData = list
        pagination && (this.pagination = pagination)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    changeHandler (current) {
      this.pagination.currentPage = current
      this._getTableData()
    },
    queryHandler () {
      this.pagination.currentPage = 1
      this._getTableData()
    },
    editHandler (row) {
      this.dialogFormTitle = '编辑'
      const { id } = row
      infor(id).then(res => {
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.formData = { ...res }
       })
      })
    },
    // 奖品
    lookyw (row) {
      const { id } = row
      this.goods = []
      this.isedit = null
      this.delnum = ''
      goodsData(id).then(res => {
        const { activity, goods} = res || {}
        this.isbianj = false
        this.accessvisible = true
        this.activity = activity
        this.aid = activity.id
        this.goods = res.goods
        this.isadd = false
      })
    },
    addHandler () {
      this.dialogFormTitle = '添加'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.resetForm()
      })
    },
    resetForm () {
      delete this.formData.id
      this.formData.dates = []
      this.$refs.form.resetFields()
    },
    submitHandler () {
      this.$refs.form.validate((valid) => {
        valid && this._setClassifyList()
      })
    },
    _setClassifyList () {
      const { formData } = this
      this.submitLoading = true
      edit({ ...formData }).then(res => {
        this.addFormVisible = false
        this.dialogFormVisible = false
        this._getTableData()
      }).finally(() => {
        this.submitLoading = false
      })
    },
    // 删除
    delbtn (item, index) {
      if (item.id) {
        const { id } = item
        const { aid } = this
        this.$confirm('确定是否要删除该奖品,该奖品删除后不可恢复，请谨慎操作?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          goodsUpdate(aid, id).then(res => {
            this.goods.splice(index, 1)
            // this.accessvisible = false
            // this._getTableData()
          })
        }).catch(() => {       
        })
      }else{
        this.isbianj = false
        this.isadd = false
        this.goods.splice(index, 1)
      }
    },
    // 编辑
    prizedit (index) {
      this.isedit = index
      this.isbianj = true
      this.isadd = true
    },
    // 保存
    addbtn (item, index) {
      const { name, pic, type, stock, id } = item 
      if (name == ''|| pic == '' || type == null || stock == '') {
        this.$message({
          message: '请完善奖品信息',
          type: 'warning'
        });
        return
      }
      item.aid = this.aid
      if (id) {
        goodsEdit({ ...item }).then(res => {
          this.isedit = null
          this.isbianj = false
          this.isadd = false
          // this.accessvisible = false
          // this._getTableData()
        }).catch(() => {
          this.isedit = null
          this.isbianj = false
          this.isadd = false
        })
      }else {
        if (this.delnum == index) {
          this.isadd = false
        }
        goodsAdd({ ...item }).then(res => {
          this.goods[index].id = res.id
          this.isedit = null
          this.isbianj = false
          this.isadd = false
          // this.accessvisible = false
          // this._getTableData()
        })
      }
    },
    typebtn (index) {
      this.goods[index].money_min = ''
      this.goods[index].money_max = ''
      this.goods[index].use_end_time = ''
    },
    jpHandler () {
      const { jpdata, num } = this
      jpdata.num = num
      
    },
    addpraize () {
      var obj = {
          aid: '',
          name: '',
          pic: '',
          money: '',
          limit_num: '',
          ratio_num: '',
          stock: '',
          money_max: '',
          money_min: '',
          sortv: '',
          type: 0,
          use_end_time: ''
        }
      this.goods.push(obj)
      this.delnum = this.goods.length - 1
      this.isedit = this.goods.length - 1
      this.isadd = true
      this.isbianj = true
    },
    lookpv ({id}) {
      getUv(id).then(res => {
        this.uv = res.uv
      })
    },
    // 获取时间
    getdate (val) {
      if (val) {
        this.formData.start_time = val[0]
        this.formData.end_time = val[1]
      }
    },
    moneymax (val) {
      this.formData.money_max = Math.floor(val * 100) / 100
    }
  }
}
</script>
<style>
.box{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.el-upload--picture-card {
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    vertical-align: top;
}
.el-upload-list--picture-card .el-upload-list__item {
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width:60px;
    height: 60px;
    margin: 0 8px 8px 0;
    display: inline-block;
    box-sizing:border-box
}
.prizebox{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pristt{
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #efefef;
  /* padding-top: 6px; */
  box-sizing:border-box;
}
.prizitem{
  width: 10%;
  box-sizing: border-box;
}
.prizitems{
  width: 10%;
}
.jiagnpbox{
  margin-top: 20px;
  /* padding: 20px 0; */
  width: 100%;
  /* background: #efefef; */
}

</style>
